<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script type="text/javascript">
    function init() {
        var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')   //渲染器将和 Canvas 元素进行绑定
        });
        renderer.setClearColor(0x000000);       // Canvas 元素背景色

        var scene = new THREE.Scene();      //实例化场景

        var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);    //定义照相机 以下是属性
        camera.position.set(25, 25, 25);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);          //将照相机加到场景中

        var light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(10, 15, 5);
        scene.add(light);
        
        var material = new THREE.MeshLambertMaterial({
            color: 0xffff00,
            emissive: 0xff0000
            //emissive: 0xff0000
        });
        var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);      //创建一个球体  加入材料
        scene.add(cube);                                                          //把长方形加到场景中
        renderer.render(scene, camera); //开始渲染
    }
</script>
</body>

</html>
<!--
    Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。Lambert 光照模型
的主要特点是只考虑漫反射而不考虑镜面反射的效果，因而对于金属、镜子等需要镜面反
射效果的物体就不适应，对于其他大部分物体的漫反射效果都是适用的。
其光照模型公式为：
Idiffuse = Kd * Id * cos(theta)
其中， Idiffuse 是漫反射光强， Kd 是物体表面的漫反射属性， Id 是光强， theta 是光
的入射角弧度。
ambient 表示对环境光的反射能力，只有当设置了 AmbientLight 后，该值才是有效的，
材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
emissive 是材质的自发光颜色，可以用来表现光源的颜色。单独使用红色的自发光：
-->